<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>色块</title>
	<style>
		.contain{
			background-color: yellow;
			width: 600px;
			/* height: 460px; */
			margin: 0px auto;
			padding: 20px;
			text-align: center;
			overflow: auto;
			
			.header{
				background-color: greenyellow;
				height: 60px;
				line-height: 60px;
			}
			
			.menu{
				margin-top: 20px;
				background-color: greenyellow;
				height: 60px;
				line-height: 60px;
			}
			
			.bod{
				background-color: cornflowerblue;
				overflow: auto;
				margin-top: 20px;
				.lef{
					width: 480px;
					height: 400px;
					background-color: palevioletred;
					float: left;
					line-height: 400px;
				}
				.rig{
					width: 100px;
					height: 400px;
					background-color: palevioletred;
					float: right;
					line-height: 400px;
				}
			}
			
			.footer{
				background-color: palevioletred;
				height: 40px;
				line-height: 40px;
				margin-top: 20px;
			}
		}
	</style>
</head>
<body>
	<div class="contain">
		<div class="header">
			header
		</div>
		<div class="menu">
			menu
		</div>
		<div class="bod">
			<div class="lef">left</div>
			<div class="rig">right</div>
		</div>
		<div class="footer">footer</div>
	</div>
	
</body>
</html>